<template>
  <div class="containerPage">
    <div class="breadcrumb">
      <div>{{ routeName }}</div>
    </div>
    <div class="formItem">
      <el-form ref="form" :model="dataForm" label-width="100px" :rules="rules">
        <el-form-item label="日历名称" prop="scheduleName">
          <el-input v-model="dataForm.scheduleName"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="dataForm.scheduleColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="权限" prop="schedulePurview" v-if="dataForm.schedulePurview == 1">
          <el-select v-model="dataForm.permissionsId">
            <el-option v-for="item in options" :key="item.permissionsId" :label="item.permissionsName"
              :value="item.permissionsId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script setup lang="ts">
import { sysScheduleGetDetail, apiSysScheduleGetPermission, sysScheduleEdit } from '@/api/calendar'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const routeName = ref(router.currentRoute.value.meta.title)
const scheduleData = ref(JSON.parse(localStorage.getItem('scheduleData')) || {})
const dataForm = reactive({
  scheduleName: '',
  scheduleColor: '',
  schedulePurview: null,
  permissionsId: ''
})
const options = ref([

])
const form = ref<FormInstance>()

const rules = reactive({
  scheduleName: [
    { required: true, message: '请输入日历名称', trigger: 'blur' },
  ],
  schedulePurview: [
    { required: true, message: '请选择权限', trigger: 'change' },
  ]
})


const getPermissions = async () => {
  let res = await apiSysScheduleGetPermission()
  if (res.code == 200) {
    options.value = res.data
  }
}
const getDatails = async () => {
  const res = await sysScheduleGetDetail(scheduleData.value.id, "", "", "", "")
  if (res.code == 200) {
    Object.assign(dataForm, res.data) // 批量更新
    dataForm.permissionsId = res.data.userAuthorityList[0].permissionsId
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await sysScheduleEdit(dataForm)
      if (res.code == 200) {
        ElMessage.success('修改成功')
        localStorage.setItem('scheduleData', JSON.stringify(dataForm));
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}



getDatails()
getPermissions()



</script>



<style lang="scss" scoped>
:deep(.el-select) {
  width: 100%;
}

.containerPage {
  width: 100%;
  height: 100%;

  .breadcrumb {
    border-bottom: 1px solid #eee;
    height: 51px;
    line-height: 51px;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
  }

  .formItem {
    max-width: 660px;
    margin-top: 32px;
  }
}
</style>